<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="55%" :show-close='false' class="addQcPlanDialog"
	 :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
		  	{{newOrEdit=='new'?'新增':(newOrEdit=='edit'?'编辑':'查看')}}物资类型
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-form label-width="110px" :inline="false" class="demo-form-inline" :model="materTypeForm" :rules="rules" ref="materTypeForm">
			<el-form-item label="名称" prop="name">
				<el-col :span="22">
					<el-input placeholder="检测项目名称" size="mini" v-model="materTypeForm.name"></el-input>
				</el-col>
			</el-form-item>
			<!--<el-form-item label="物资类型编号" prop="number">
				<el-col :span="22">
					<el-input placeholder="物资类型编号" size="mini" v-model="materTypeForm.number"></el-input>
				</el-col>
			</el-form-item>-->
			<!--safetyQty 安全库存数量-->
			
			<el-form-item label="是否危险物资" prop="dangerous">
				<el-col :span="22">
					<el-select v-model="materTypeForm.dangerous" placeholder="请选择" style="width: 100%;" size="mini">
						<el-option v-for="item in yesorno" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>
			<el-form-item label="是否标准样品" prop="standardSample">
				<el-col :span="22">
					<el-select v-model="materTypeForm.standardSample" placeholder="请选择" style="width: 100%;" size="mini">
						<el-option v-for="item in yesorno" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-col :span="22">
					<el-input placeholder="备注" size="mini" v-model="materTypeForm.remark"></el-input>
				</el-col>
			</el-form-item>
			<!--<el-form-item label="状态" v-if="newOrEdit != 'new'">
				<el-col :span="22">
					<el-select v-model="materTypeForm.status" placeholder="请选择" style="width: 100%;" size="mini" disabled>
						<el-option v-for="item in enableStatus" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>-->

		</el-form>

		<span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click="submitMaterType" :disabled="!isRepeat">提 交</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>
	</el-dialog>

</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				materTypeForm: {
					name: null,
					dangerous: null,
					standardSample: null,
					// number: null,
					remark:null,
					status:null,
				},
				rules: {
					name: [
						{ type: 'string', required: true, message: '请填写名称', trigger: 'blur' }
					],
					// number: [
					// 	{required: true, message: '请选择类型编号', trigger: 'blur' }
					// ],
					dangerous: [
						{required: true, message: '请选择是否危险物质', trigger: 'blur' }
					],
					standardSample:[
						{ required: true, message: '请选择是否标准物质', trigger: 'blur' }
					]
				},
				isRepeat:true,
				
			}
		},
		props: ['addVisible', 'newOrEdit','materialTypeInfo'],
		components: {

		},

		computed: {
			...mapState(['yesorno', 'enableStatus','submitType']),
		},
		mounted() {

		},
		watch: {
			addVisible(val, oldVal) {
				if (val) {
					if(this.newOrEdit == 'new'){
						this.materTypeForm.parentCode = this.materialTypeInfo.code
					}else if(this.newOrEdit == 'edit'){
						for (var i in this.materialTypeInfo){
							this.materTypeForm[i] = this.materialTypeInfo[i]
						}
					}
					
				}
			}
		},
		methods: {
			submitMaterType() {
				this.$refs.materTypeForm.validate((valid) => {  //表单验证
					if (valid) {
						var data = {
							name: this.materTypeForm.name,
							dangerous: this.materTypeForm.dangerous,
							standardSample: this.materTypeForm.standardSample,
							// number: this.materTypeForm.number,
							remark:this.materTypeForm.remark,
							status:1
						}
						console.log(data)
						if (this.newOrEdit == 'new') {
							var url = "/technology/addMaterialType.htm"
							data.parentCode = this.materTypeForm.parentCode;

						} else {
							var url = '/technology/updateMaterialType.htm';
							data.id = this.materTypeForm.id;
						}
						this.isRepeat = false;
						this.$http({
							method: 'post',
							apiUrl: url,
							params: data,
							isJson: true,
						}).then(res => {
							this.isRepeat = true;
							if (res.code == 0) {
								this.$message({
									type: 'success',
									message: '提交成功!'
								});
								
								data.code = this.materTypeForm.code
								if(this.newOrEdit == 'edit'){
									this.$parent.handleNodeClick(data)
									this.$parent.readMaterTypeList(this.materTypeForm.id)
								}else{
									this.$parent.materialTypeInfo = {}
									this.$parent.readMaterTypeList()
								}
								
								this.close('materTypeForm');
							}
						}).catch(() => {

						});

					} else {
						return false;
					}
				});
			},
			//关闭
			close(formName) {
				this.$refs.materTypeForm.resetFields();//重置表单
				// this.$emit()
				this.isRepeat = true;
				this.materTypeForm =  {
					name: null,
					dangerous: null,
					standardSample: null,
					// number: null,
					remark:null,
					status:null,
				};

				this.$emit('update:addVisible', false);
			},
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.addQcPlanDialog .el-dialog {
		/*margin-top: 10vh !important;*/
		height: 60%;
	}

	.addQcPlanDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	.addQcPlanDialog .heighHalf {
		height: calc(100% - 60px)
	}

	.addQcPlanDialog .heighHalf .height40 {
		height: 40px;
		line-height: 40px;
	}
</style>